<template>
	<view class="mainPage">
		<view class="user padding">
			<view class="userinfo" v-if="hasLogin" @tap="$utils.$page.open('/pages/user/account/info')">
				<image class="avatarUrl" :src="USERINFO.headimg" mode=""></image>
				<view class="info padding-left">
					<view class="nickName text-bold text-lg">{{ USERINFO.nickname }}</view>
					<view class="grade sm radius text-sm">
						<image src="@/static/image/my/grade.png" mode="" class="grade-image"></image>
						<text class="padding-left-mn qian-gray" v-if="USERINFO.vip_state">{{ USERINFO.vip_title }}
							{{ USERINFO.days_remaining ? USERINFO.days_remaining + '天后到期' : '永久' }}</text>
						<text class="padding-left-mn qian-gray" v-else>未开通会员</text>
					</view>
				</view>
			</view>
			<view class="userinfo" v-else @tap="login({})">
				<image class="avatarUrl" :src="WEBCONFIG.default_avatar" mode=""></image>
				<view class="info padding-left">
					<view class="nickName text-bold text-lg">点击登录</view>
				</view>
			</view>
			<view class="cuIcon-settingsfill setting" @tap="$utils.$page.open('/pages/user/account/settings')"></view>
		</view>
		<view class="grid col-4 padding fans">
			<view class="item text-center" @tap="$utils.$page.open('/pages/user/collect/technician', true)">
				<view class="num text-xl">{{ STATICTIS.technician }}</view>
				<view class="text text-sm qian-gray">关注</view>
			</view>
			<view class="item text-center" @tap="$utils.$page.open('/pages/user/collect/service', true)">
				<view class="num text-xl">{{ STATICTIS.service }}</view>
				<view class="text text-sm qian-gray">收藏</view>
			</view>
			<view class="item text-center">
				<view class="num text-xl">{{ STATICTIS.integral }}</view>
				<view class="text text-sm qian-gray">积分</view>
			</view>
			<view class="item text-center" @click="$utils.$page.open('/pages/user/coupon/list', true)">
				<view class="num text-xl">{{ STATICTIS.coupon_used }}</view>
				<view class="text text-sm qian-gray">优惠券</view>
			</view>
		</view>
		<view class="container padding padding-top-0">
			<view class="box padding-top-0 margin-bottom">
				<view class="padding-sm radius-xl bg-white">
					<view class="crow balance-item">
						<view class="item radius-lg padding" @click="$utils.$page.open('/pages/user/wallet/wallet', true)">
							<view class="text">我的钱包</view>
							<view class="money text-black text-bold">{{ STATICTIS.money }}</view>
							<view class="bottom-right">
								<image src="@/static/image/my/icon_balance.png" mode=""></image>
							</view>
						</view>
						<view class="item radius-lg padding" @click="$utils.$page.open('/pages/user/coupon/list', true)">
							<view class="text">优惠券</view>
							<view class="money text-black text-bold">{{ STATICTIS.coupon_unuse }}张</view>
							<view class="bottom-right">
								<image src="@/static/image/my/icon_coupon.png" mode=""></image>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 菜单 -->
			<view class="padding-xs radius-xl bg-white menu">
				<view class="padding-sm padding-left">常用功能</view>
				<view class="grid col-4 padding-xs text-center list">
					<view class="item margin-bottom" v-for="(item, index) in menu" :key="index"
						@tap="$utils.$page.open(item.page, item.hasLogin)"
						v-if="item.auth ? $utils.$auth.auth(item.auth) : true">
						<image :src="item.icon" mode=""></image>
						<view class="text-sm text-black">
							{{ item.name }}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="u-demo-block banner padding padding-top-0" v-if="agentBanner.length > 0">
			<u-swiper :list="agentBanner" keyName="image" circular radius="15"
				bgColor="transparent" height="140" @click="clickSwiper"></u-swiper>
		</view>
		<x-tabbar page="/pages/user/index" />
		<x-login ref="xLoginRef" @success="getMyInfo" />
	</view>
</template>

<script>
import { mapState, mapGetters } from 'vuex'
export default {
	data() {
		return {
			menu: [
				{ name: '地址管理', icon: require('@/static/image/my/location.png'), page: '/pages/user/address/list', hasLogin: true },
				{ name: '技师入驻', icon: require('@/static/image/my/apply.png'), page: '/technician/pages/user/apply', auth: { permission: 'technician_individual_settlement' }, hasLogin: true },
				{ name: '领券中心', icon: require('@/static/image/my/coupon.png'), page: '/pages/user/coupon/center', hasLogin: true },
				{ name: '投诉建议', icon: require('@/static/image/my/appeal.png'), page: '/pages/user/feedback/index' },
				{ name: '我的评价', icon: require('@/static/image/my/message.png'), page: '/pages/user/comment/comment', hasLogin: true },
				{ name: '邀新有礼', icon: require('@/static/image/my/gift_box.png'), page: '/pages/user/gift/index', hasLogin: true, auth: { permission: 'new_user_gift_state' } },
			],
			userInfo: [],
			number: [],
			agentBanner:[]
		};
	},
	computed: {
		...mapGetters([
			'hasLogin'
		]),
		...mapState({
			USERINFO: state => state.USER.USERINFO,
			STATICTIS: state => state.USER.STATICTIS,
			WEBCONFIG: state => state.WEBCONFIG,
		})
	},
	onLoad() {
		this.$utils.$api.Ads.ads('agent').then((res) => {
			this.agentBanner = res;
		}).catch((err) => {
		})
	},
	onShow() {
		uni.hideTabBar();
		this.hasPermissionTechnician();
		this.hasPermissionAgent();
		this.getMyInfo();
	},
	methods: {
		clickSwiper(index){
			this.$utils.$page.ads(this.agentBanner[index]);
		},
		hasPermissionTechnician(){
			if (this.$utils.$auth.user('technician')) {
				this.menu[1] = { name: '技师中心', icon: require('@/static/image/my/apply.png'), hasLogin: true, page: '/technician/pages/index/index' };
			}
		},
		hasPermissionAgent(){
			if (this.$utils.$auth.user('agent')) {
				if(!this.menu.find(item=>item.page.includes('/agent/pages/index/index'))){
					this.menu.splice(2,0,{ name: '代理中心', icon: require('@/static/image/my/agent.png'), hasLogin: true, page: '/agent/pages/index/index' })
				}
			}
		},
		getMyInfo() {
			if (this.$store.getters.hasLogin) {
				this.$utils.$api.User.userinfo(this, true);
				this.$utils.$api.User.statictis(this).then(() => { }).catch(() => { });
				this.hasPermissionTechnician();
				this.hasPermissionAgent();
			}
		}
	}
}
</script>

<style lang="less" scoped>
.user {
	display: flex;
	justify-content: space-between;
	position: relative;

	.bg-img {
		position: absolute;
		top: -180upx;
		right: -100upx;
		width: 100%;
		height: 366px;
	}

	.userinfo {
		display: flex;
		flex: 1;
		margin-left: 20upx;
		z-index: 99;
		justify-content: center;
		align-items: center;

		.avatarUrl {
			border-radius: 50%;
			width: 100upx;
			height: 100upx;
		}

		.info {
			flex: 1;

			.grade {
				display: flex;
				align-items: center;

				.grade-image {
					width: 25upx;
					height: 25upx;
				}
			}
		}
	}

	.setting {
		font-size: 40upx;
		z-index: 99;
		padding: 0 20upx
	}
}

.fans {
	position: relative;
	z-index: 99;
}

.container {
	position: relative;
	z-index: 99;

	.box {
		.balance-item {
			justify-content: space-between;

			.item {
				position: relative;
				background-color: #efefef;
				width: 45%;
				height: 140rpx;

				.bottom-right {
					position: absolute;
					bottom: 0;
					right: 0;
					background-color: white;
					padding: 10rpx;
					border-top-left-radius: 30rpx;
					border-bottom-right-radius: 20rpx;
					border: 1rpx solid #efefef;

					image {
						width: 35rpx;
						height: 35rpx;
					}
				}
			}

			.money {
				font-size: 40upx;
			}
		}
	}
}

.menu {
	.list {
		.item {
			display: flex;
			flex-direction: column;
			align-items: center;

			image {
				width: 60upx;
				height: 60upx;
			}
		}
	}
}

.qian-gray {
	color: gray;
}
</style>
